<template>
  <div>
     <div class="nav">
          <div class="nav_wrapper">
              <div class="item">
                  开通/绑定零壹人推广账号
              </div>
          </div>
      </div>
      <div class="head">
          <div class="img_box">
              <img :src="userinfo.headimgurl" alt="">
          </div>
          <h4 class="username">{{userinfo.nickname}}</h4>
      </div>
      <div class="wrapper">
          <!-- <div class="form_group">
              <label for="" class="form_lable">真实姓名</label>
              <div class="form_input border-bottom-1px">
                  <cube-input
                      v-model="name.value"
                      :placeholder="name.placeholder"
                      :type="name.type"
                      :maxlength="name.maxlength"
                      :readonly="name.readonly"
                      :disabled="name.disabled"
                      :autofocus="name.autofocus"
                      :autocomplete="name.autocomplete"
                    ></cube-input>
              </div>
          </div> -->
          <div class="form_group">
              <label for="" class="form_lable">手机号码</label>
              <div class="form_input border-bottom-1px">
                  <cube-input
                      v-model="mobile.value"
                      :placeholder="mobile.placeholder"
                      :type="mobile.type"
                      :maxlength="mobile.maxlength"
                      :readonly="mobile.readonly"
                      :disabled="mobile.disabled"
                      :autofocus="mobile.autofocus"
                      :autocomplete="mobile.autocomplete"
                    ></cube-input>
              </div>
          </div>
          <div class="form_group">
              <label for="" class="form_lable">验证码</label>
              <div class="form_input border-bottom-1px">
                  <div class="form_input_box">
                      <cube-input
                        v-model="code.value"
                        :placeholder="code.placeholder"
                        :type="code.type"
                        :maxlength="code.maxlength"
                        :readonly="code.readonly"
                        :disabled="code.disabled"
                        :autofocus="code.autofocus"
                        :autocomplete="code.autocomplete"
                      ></cube-input>
                  </div>
                  <div>
                      <a href="javascript:;" class="form_btn" :class="{action : canClick}" @click="sendcode">{{content}}</a>
                  </div>
              </div>
          </div>

           <a href="javascript:;" class="comfirm_btn" :style="comfirm_btn_bg" @click="doBinding">确定</a>
      </div>
  </div>
</template>
<script>
import userimg from '@/assets/lingyi_logo@2x.png'
import {Debounce} from '@/util/date.js';
export default {
    data(){
        return{
            comfirm_btn_bg:{
                backgroundImage: "url(" + require("../../assets/page6_btn_confirm@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            userimg,
            name:{
                value: '',
                placeholder: '请输入您的真实姓名',
                type: 'text',
                readonly: false,
                maxlength: 100,
                disabled: false,
                autofocus: true,
                autocomplete: false
            },
            mobile:{
                value: '',
                placeholder: '请输入您要绑定或者开通的手机号码',
                type: 'text',
                readonly: false,
                maxlength: 100,
                disabled: false,
                autofocus: true,
                autocomplete: false,
            },
            code:{
                value: '',
                placeholder: '请输入验证码',
                type: 'text',
                readonly: false,
                maxlength: 6,
                disabled: false,
                autofocus: true,
                autocomplete: false,
            },
            content: '发送验证码',
            people_sendtime: 60,
            canClick: true,  //添加canClick
            userinfo:[],
            peopleinfo:[]
        }
    },
    metaInfo: {
      title: "开通/绑定零壹人推广账号"
    },
    methods:{
        getUserInfo:function(){
            let that = this;
            let url = "/fang/personal/user_info";
            that.$axios.post(url,that.$qs.stringify({
                access_token:that.$store.state._token01
            }))
            .then(function(response){
                console.log(response);
                let res = response.data;
                if(res.status == 1){
                    that.userinfo = res.data.item;
                    that.mobile.value = that.userinfo.mobile;
                }else if (res.status == -1) {
                    that.noLogin();
                }
            })
            .catch(function(error){
                console.log(error);
            });
        },
        sendcode:Debounce(function(){
            let that = this;
            let mobile = that.mobile.value;
            if(!this.canClick){
                return;
            }
            if(mobile){
                that.$axios.post("/fang/personal/verify_code", that.$qs.stringify({
                        mobile:mobile,
                        access_token:that.$store.state._token01,
                    })
                )
                .then(function (response) {
                      let res = response.data;
                      if(res.status == 1){
                          that.countDown();
                      }else{
                          that.showAlert(res.msg);
                      }
                })
                .catch(function (error) {
                  console.log(error);
                  that.showAlert(error);
                });
            }else{
                that.showToastTxtOnly("请输入正确的手机号码!")
            }
        },1000),
        doBinding:Debounce(function(){
            let that = this;
            let mobile = that.mobile.value;
            // let realname = that.name.value;
            let code = that.code.value;
            that.$axios.post("/fang/personal/register", that.$qs.stringify({
                    mobile:mobile,
                    code:code,
                    access_token:that.$store.state._token01,
                })
            )
            .then(function (response) {
                  let res = response.data;
                  console.log(res);
                  if(res.status == '1'){
                      that.$router.push({
                          name:'PersonalCenter'
                      });
                  }else{
                      that.showAlert(res.msg);
                  }
            })
            .catch(function (error) {
              console.log(error);
              that.showAlert(error);
            });
        },1000),
        showAlert:function(error) {
           this.$createDialog({
             type: 'alert',
             title: '出错了',
             content: error,
             icon: 'cubeic-alert'
           }).show()
        },
        countDown:function() {
          if (!this.canClick) return   //改动的是这两行代码
          this.canClick = false
          this.content = this.people_sendtime + 's后重新发送'
          let clock = window.setInterval(() => {
            if (this.people_sendtime < 0) {
              window.clearInterval(clock)
              this.$cookies.remove("people_sendtime");
              this.content = '重新发送验证码'
              this.people_sendtime = 60;
              this.canClick = true   //这里重新开启
            }else{
              this.people_sendtime--;
              this.$cookies.set("people_sendtime",this.people_sendtime,"60s");
              this.content = this.people_sendtime + 's后重新发送'
            }
          },1000)
        },
        showToastTxtOnly(text) {
         this.toast = this.$createToast({
           txt: text,
           type: 'txt'
         })
         this.toast.show()
       },
    },
    activated:function(){
        this.getUserInfo();
    },
}
</script>
<style scoped>
.nav_wrapper{
    height: 1.76rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.border-bottom-1px::after{
    border-color: #E4E4E4;
}
.nav_wrapper .item{
    height: 100%;
    line-height: 1.76rem;
    flex: 1;
    color: #424242;
    font-size: .56rem;
    position: relative;
}
.nav_wrapper .action{
    color: #0FB199;
    font-weight:600;
}
.nav_wrapper .action::after{
    content: "";
    display: block;
    width: 1.8rem;
    height: .08rem;
    background: #0FB199;
    border-radius: .12rem;
    position: absolute;
    left: 50%;
    bottom: .24rem;
    transform: translate(-50%,0);
}
.head{
    margin-top: 1.2rem;
}
.head .img_box{
    width: 3.14rem;
    height: 3.14rem;
    margin: 0 auto;
    border-radius: 50%;
    border: .1rem solid #ffffff;
    box-shadow: 0 0.16rem 0.24rem #dadada;
}
.head .img_box img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.head .username{
    font-size: .64rem;
    font-weight: 500;
    color: #252525;
    margin-top: .28rem;
}
.head  .user_info{
    margin-top: .84rem
}
.head  .user_info p{
    font-size: .6rem;
    color: #383838;
    font-weight: 500;
    margin-top: .2rem;
}
.wrapper{
    margin-top: .6rem;
}
.wrapper .form_group{
    display: flex;
    align-items: center;
    height: 1.76rem;
    padding-right: 1.16rem;
}
.wrapper .form_group .form_lable{
    width: 2.4rem;
    flex: none;
    text-align: right;
}
.wrapper .form_group .form_lable .icon{
    display: block;
    width: 1.24rem;
    height: 1.2rem;
    margin-left: 1rem;
}
.wrapper .form_group .form_input{
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
}
.wrapper .form_group .form_input > input{
    height: 100%;
    flex: 1;
    border: none;
}
.wrapper .form_group .border-bottom-1px::after{
    border-color: #E1E1E1;
}
.cube-input::after{
    border: none;
}
.wrapper .form_group .form_btn{
    width: 2.74rem;
    background: #EBEBEB;
    border-radius: .16rem;
    padding: .16rem .2rem .16rem .24rem;
}
.wrapper .form_group .action{
    background: #1AB9A3;
    color: #FFFFFF;
}
.wrapper .form_group .form_input_box{
    flex: 1;
}
.comfirm_btn{
    display: block;
    font-size: .64rem;
    color: #FFFFFF;
    font-weight: 600;
    width: 13.4rem;
    height: 2.64rem;
    line-height: 2rem;
    padding: 0;
    background: none;
    border: none;
    margin: 7.5rem auto 0 auto;
    letter-spacing: 2px;
}
.cube-input{
    flex:1;
}
</style>
<style lang="stylus" rel="stylesheet/stylus">
.form_input
    .cube-input
        padding-left: 1rem;
</style>
